<template>
  <div>
    <div><h2>实时信息</h2></div>
    <div>
      <div class="echartsBox">
        <div class="Line">
          <!-- 内存使用率折线图 -->
          <Echarts
            :data="OptionData"
            style="height: 450px; margin-top: 30px"
            v-loading="loading"
            element-loading-background="rgba(255, 255, 255, 1)"
            element-loading-text="数据加载中"
          ></Echarts>
        </div>
      <div class="dataBox">
        <div class="dataBox_item">
          <span class="item_name">Free:</span>
          <span class="item_num">{{ MEM.free }}</span>
        </div>
        <div>
          <span class="item_name">Used:</span>
          <span class="item_num">{{ MEM.used }}</span>
        </div>
        <div>
          <span class="item_name">BuffCache:</span>
          <span class="item_num">{{ MEM.buffCache }}</span>
        </div>
      </div>
       <!-- 内存使用占比饼图 -->
        <div class="Bar">
          <Echarts
            :data="OptionData2"
            style="width: 1200px; height: 300px; margin-top: 30px"
          ></Echarts>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import Echarts from "@/components/ECharts/ECharts.vue";
import { mapState } from "vuex";
import Decimal from "decimal.js";
export default {
  data() {
    return {
      //websocket
      socket: null,
      //定时器
      jishiqi: null,
      //折现图是否运行的标志
      isStart: true,
      //加载中
      loading: true,
      //x轴数据
      xData: [],
      //y轴数据
      yData: [],
      //内存使用率折线图数据
      OptionData: {
        title: {
          text: "内存使用率",
          padding: 18,
          textStyle: {
            //图例文字的样式
            color: "#fff",
          },
        },
        grid: {
          x: 80,
          y: 80,
          borderWidth: 1,
        },
        xAxis: {
          type: "category",
          data: [],
          //紧挨边缘
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          //缩放:脱离0值比例
          scale: true,
        },
        series: [
          {
            data: [],
            type: "line",
            //使折线变得平滑
            smooth: true,
            areaStyle: {
              color: "#3FB1E3",
            },
          },
        ],
        tooltip: {
          //tip中的内容
          formatter: function (arg) {
            // let argData = arg.data.toFixed(5);

            // argData = argData + "%";
            var num =
              new Decimal(arg.data).mul(new Decimal(100)).toFixed(3) + "%";

            return "CPU已使用:" + num;
          },
        },
      },
      //内存使用占比饼图数据
      OptionData2: {
        title: {
          text: "内存使用占比",
          padding: 18,
          textStyle: {
            //图例文字的样式
            color: "#fff",
          },
        },
        // 图例
        legend: {
          orient: 'vertical',
          left: '49%',  //图例距离左的距离
          y: '20%',  //图例上下居中
          data:['占用','空闲','buffCache']
        },
        tooltip: {
          // tip中的内容
          formatter: function (arg) {
            var num =
              new Decimal(arg.data.value).mul(new Decimal(100)).toFixed(3) +
              "%";

            return arg.data.name + ":" + num;
          },
        },
        series: [
          {
            type: "pie",
            radius: "70%", //图的大小
            center: ["35%", "60%"], //图的位置，距离左跟上的位置
            data: [
              {
                name: "占用",
                value: "",
              },
              {
                name: "空闲",
                value: "",
              },
              {
                name: "buffCache",
                value: "",
              },
            ],
            label: {
              show: true,
              position: "inside",
              fontSize: 12,
            },
          },
        ],
      },
    };
  },
  components: {
    Echarts,
  },
  computed: {
    ...mapState(["sessionId", "MEM"]),
  },
  created() {},
  mounted() {
    if (!this.sessionId) {
      setTimeout(() => {
        this.sendMessage();
      }, 100);
    } else {
      this.sendMessage();
    }

    this.jishiqi = setInterval(() => {
      this.getData();
      this.getTimeData();
    }, 1000);

    setTimeout(() => {
      this.loading = false;
    }, 3000);
  },
  beforeDestroy() {
    this.$http({
      method: "delete",
      url: "/resource/mem",
      params: {
        sessionId: this.sessionId,
      },
    }).then((res) => {
      console.log(res);
    });

    clearInterval(this.jishiqi);
  },
  methods: {
    //发送get请求，获取数据
    sendMessage() {
      // var Id = this.sessionId
      console.log(this.sessionId);
      // var ID = parseInt(this.sessionId)
      this.$http({
        method: "get",
        url: "/resource/mem",
        params: {
          sessionId: this.sessionId,
        },
      });
    },
    //数据渲染到echarts上
    getData() {
      if (this.yData.length >= 10) {
        this.yData.splice(0, 1);
        this.yData.push(this.MEM.used / this.MEM.total);
      } else {
        this.yData.push(this.MEM.used / this.MEM.total);
      }
      this.OptionData.xAxis.data = this.xData;
      this.OptionData.series[0].data = this.yData;

      this.OptionData2.series[0].data[0].value = this.MEM.used / this.MEM.total;
      this.OptionData2.series[0].data[1].value = this.MEM.free / this.MEM.total;
      this.OptionData2.series[0].data[2].value =
        this.MEM.buffCache / this.MEM.total;
    },
    //获取时间渲染到echarts
    getTimeData() {
      if (this.xData.length >= 10) {
        this.xData.splice(0, 1);
        this.xData.push(this.$moment().format("HH:mm:ss"));
      } else {
        this.xData.push(this.$moment().format("HH:mm:ss"));
      }
    },
  },
};
</script>


<style scoped lang="less">
.dataBox {
  display: flex;
  justify-content: space-around;
  .item_name {
    color: #32325d;
    font-size: 15px;
    font-weight: 800;
    margin-right: 10px;
  }
  .item_num {
    font-weight: 400;
    font-size: 15px;
  }
}
.Line {
  width: 1200px;
  height: 490px;
  background-color: #333;
}
.Bar {
  width: 1200px;
  height: 350px;
  background-color: #333;
}
</style>